<template>
  <div class="s-empty" :class="customClass" :style="c_style">
    <div class="s-empty-container">
      <s-image
        v-if="src"
        custom-class="s-empty-img"
        :src="src"
        :mode="imgMode"
        :width="imgWidth"
        :height="imgHeight"
        :custom-style="imgStyle"
      />
      <slot>
        <div v-if="text" class="s-empty-text" :style="c_textStyle">{{ text }}</div>
      </slot>
    </div>
  </div>
</template>

<script>
import addUnit from '../../utils/addUnit';
import mergeStyle from '../../utils/mergeStyle';
import SImage from '../s-image/s-image';

/**
 * s-empty 列表空展示
 * @description 列表空展示组件，在无数据情况下使用
 * @property {String|Object|Array} customClass 自定义class
 * @property {String|Number} height 高度
 * @property {String|Number} margin 间距
 * @property {String|Number} padding 内间距
 * @property {String|Object} customStyle style样式
 * @property {String} src 图片路径
 * @property {String|Number} imgWidth = [400] 图片宽度
 * @property {String|Number} imgHeight 图片高度
 * @property {String} imgMode = [aspectFill] 图片图片裁剪、缩放的模式
 * @property {String|Object} imgStyle 图片style样式
 * @property {String} text 文字描述
 * @property {String|Number} fontSize = [28]  文字大小
 * @property {String} color = [{textPlaceholder}] 文字颜色
 * @property {String|Object} textStyle 文字style样式
 * @example <s-empty src="" text="暂无数据" padding="100rpx 0 0 0"/>
 */
export default {
  name: 'SEmpty',
  components: {
    SImage,
  },
  props: {
    customClass: {
      type: [String, Object, Array],
      default: '',
    },
    height: {
      type: [String, Number],
      default: '',
    },
    margin: {
      type: [String, Number],
      default: '',
    },
    padding: {
      type: [String, Number],
      default: '',
    },
    customStyle: {
      type: [String, Object],
      default: '',
    },
    src: {
      type: String,
      default: '',
    },
    imgWidth: {
      type: [String, Number],
      default: 400,
    },
    imgHeight: {
      type: [String, Number],
      default: '',
    },
    imgMode: {
      type: String,
      default: 'aspectFill',
    },
    imgStyle: {
      type: [String, Object],
      default: '',
    },
    text: {
      type: String,
      default: '',
    },
    fontSize: {
      type: [String, Number],
      default: 28,
    },
    color: {
      type: String,
      default: '{textPlaceholder}',
    },
    textStyle: {
      type: [String, Object],
      default: '',
    },
  },
  computed: {
    c_style() {
      return mergeStyle(
        {
          height: addUnit(this.height),
          margin: addUnit(this.margin),
          padding: addUnit(this.padding),
        },
        this.customStyle,
      );
    },
    c_textStyle() {
      return mergeStyle(
        {
          fontSize: addUnit(this.fontSize),
          color: this.$sTheme(this.color),
        },
        this.textStyle,
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.s-empty {
  display: flex;
  justify-content: center;
  align-items: center;

  &-container {
    font-size: 0;
    text-align: center;
  }

  &-text {
    margin-top: 30rpx;
    font-size: 28rpx;
  }
}
</style>
